import React from "react";
import { Button, Checkbox, Form, Input, Space, message, Row, Col } from "antd";
import { UserOutlined, LockOutlined ,DeploymentUnitOutlined} from "@ant-design/icons";
import StarrtSky from "./components/StarrtSky";
import { useNavigate } from "react-router-dom";

import style from "./Css/login.module.scss";
import ZLBHeader from "./components/ZLB/index";

const View: React.FC = () => {
  // const [messageApi] = message.useMessage();
  const navgetTo = useNavigate(); //路由跳转
  let FormObj: object = {
    username: "",
    password: "",
    remember: false,
    verificationCode:'',
  };
  let isLoggedIn: boolean = true;
  FormObj = JSON.parse(localStorage.getItem("rememS")) || {};
  const onClick = (value: string) => {
    console.log(value, "点击了");
    isLoggedIn = false;
    console.log(isLoggedIn);
  };
  const onFinish = (values: any) => {
    console.log("Received values of form: ", values);
    if (values.username != "why123" && values.password != "123456") {
      message.open({
        type: "success",
        content: "账号或密码不正确！请修改后重新登录",
        duration: 3,
      });
    } else {
      message.open({
        type: "success",
        content:
          "欢迎您" + values.username + "登录:前端阳哥 · REACT后台管理系统",
        duration: 3,
      });
      navgetTo("/");
    }

    if (values.remember) {
      localStorage.setItem("rememS", JSON.stringify({...values,verificationCode:"" }));
    } else {
      localStorage.setItem(
        "rememS",
        JSON.stringify({ username: "", password: "", remember: false ,verificationCode:"" })
      );
    }
  };
  return (
    <>
      <div className={style.loginPages}>
        <div className={style.loginPages_background}>
          <StarrtSky></StarrtSky>
        </div>
        <div className={style.From_Ingput_boX}>
          <ZLBHeader click={onClick}></ZLBHeader>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={FormObj}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: "账号不能为空" }]}
            >
              <Input
               id = "test"
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="请输入您的账号"
                className={style.InputUser}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: "密码不能为空!" }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="请输入您的密码"
                className={style.InputUser}
              />
            </Form.Item>
            <Form.Item
              name="verificationCode"
              rules={[{ required: true, message: "密码不能为空!" }]}
            >
              <Row >
                <Col span={16} style={{lineHeight:'50px'}}>
                  <Input
                    prefix={ <DeploymentUnitOutlined   className="site-form-item-icon" />}
                    placeholder="请输入验证码"
                    className={style.InputUser}
                  />
                </Col>
                <Col span={6}>
                  <div style={{paddingLeft:'40px'}}>
                    <img
                      style={{ width: "120px", height: "50px" }}
                      src="https://ts3.cn.mm.bing.net/th?id=OIP-C.nkWmM-lReaN8kH-ieXmZrQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
                      alt=""
                    />
                  </div>
                </Col>
              </Row>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className={style.login_form_button}
                block
              >
                登录
              </Button>
            </Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox style={{ color: "#fff" }}>记住密码</Checkbox>
            </Form.Item>
          </Form>
         
        </div>
      </div>
    </>
  );
};
export default View;
